<template>
  <div id="leaderOpinion">
    <el-dialog :title="leaderTypeText" :visible.sync="leaderOpinionVisible" width="80%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
      <el-form ref="leaderOpinionForm" :model="leaderOpinionForm" label-width="90px" :rules="leaderOpinionFormRules" inline id="leaderOpinionForm">
        <el-form-item label="姓名" prop="leaderName">
          <el-autocomplete v-model="leaderOpinionForm.leaderName" :fetch-suggestions="querySearchLeaderName" placeholder="请输入领导姓名" :trigger-on-focus="false" @select="handleSelectLeader"></el-autocomplete>
        </el-form-item>
        <el-form-item label="职务" prop="postName">
          <el-input v-model="leaderOpinionForm.postName"></el-input>
        </el-form-item>
        <el-form-item label="批示日期" prop="commentTime">
          <el-date-picker v-model="leaderOpinionForm.commentTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <div style="clear:both"></div>
        <el-form-item label="批示内容" prop="comment">
          <el-autocomplete :trigger-on-focus="false" :fetch-suggestions="querySearch" v-model="leaderOpinionForm.comment" style="width:830px" :maxlength="200"></el-autocomplete>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="leaderOpinionVisible = false">取消</el-button>
        <el-button type="primary" @click.native="leaderOpinionFormSubmit" :loading="leaderOpinionFormLoading">提交</el-button>
      </div>
    </el-dialog>
    <el-table :data="leaderOpinion" highlight-current-row v-loading="leaderOpinionLoading" border style="width: calc(100% - 20px);margin-bottom:10px" >
      <el-table-column prop="leaderName" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="postName" label="职务" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="commentTime" label="批示日期" width="120">
      </el-table-column>
      <el-table-column label="批示意见" prop="comment" align="left" show-overflow-tooltip>
        <!-- <template slot-scope="scope">
          <div v-html="scope.row.comment.replace(/\n/g,'<br>')"></div>
        </template> -->
      </el-table-column>
      <el-table-column label="操作" width="150" v-if="canEdit">
        <template slot-scope="scope">
          <el-button circle size="small" @click="editLeaderOpinion(scope.row)" type="primary" icon="el-icon-edit"></el-button>
          <el-button circle size="small" @click="delLeaderOpinion(scope.row.id)" type="danger" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="addLeaderOpinion()" type="primary" v-if="canEdit">添加{{leaderTypeText}}</el-button>
  </div>
</template>

<script>
export default {
  name: 'leaderOpinion',
  props: ['recordId', 'recordTable', 'leaderType', 'canEdit'],
  watch: {
    recordId: {
      handler (val) {
        this.getLeaderOpinion()
      },
      immediate: true
    },
    recordTable: {
      handler (val) {
        this.getLeaderOpinion()
      },
      immediate: true
    },
    canEdit: {
      handler (val) {
      },
      immediate: true
    },
    leaderType: {
      handler (val) {
        this.getLeaderOpinion()
        switch (val) {
          case 1:
            this.leaderTypeText = '部领导批示'
            break
          case 2:
            this.leaderTypeText = '司领导批示'
            break
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      leaderOpinionFormLoading: false,
      leaderOpinionVisible: false,
      leaderTypeText: '',
      leaderOpinion: [],
      leaderOpinionLoading: false,
      leaderOpinionForm: {
        id: null,
        leaderName: '',
        postName: '',
        commentTime: '',
        comment: '',
        leaderType: ''
      },
      leaderOpinionFormRules: {
        leaderName: [{ required: true, message: '请输入领导姓名', trigger: 'blur' }],
        postName: [{ required: true, message: '请输入职务', trigger: 'blur' }],
        commentTime: [{ required: true, message: '请输入批示日期', trigger: 'blur' }],
        comment: [{ required: true, message: '请输入批示内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    querySearch (queryString, cb) {
      return this.getNotice(this, queryString, cb)
    },
    getNotice (self, queryString, cb) {
      let para = {
        key: queryString,
        realName: this.leaderOpinionForm.leaderName
      }
      self.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/home/getMatchedOpinions`, para)
        .then(function (response) {
          console.log('获取成功')
          var results = response.data.result
          let newArr = []
          results.forEach(function (item) {
            let obj = {'value': item}
            newArr.push(obj)
          })
          cb(newArr)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    delLeaderOpinion (id) {
      this.$confirm('确定要删除该信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http
          .get(this.$http.defaults.selectionAPI + `api/busLeaderOpinion/remove?id=` + id)
          .then(response => {
            if (response.data.success) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getLeaderOpinion()
            } else {
              this.$message({
                message: '删除失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            this.$message({
              message: '网络删除失败:' + error,
              type: 'error'
            })
          })
      }).catch(() => {
        console.log('已取消删除')
      })
    },
    editLeaderOpinion (data) {
      this.leaderOpinionVisible = true
      this.leaderOpinionForm = data
    },
    getLeaderOpinion () {
      let para = {
        leaderType: this.leaderType,
        recordId: this.recordId,
        recordTable: this.recordTable
      }
      this.leaderOpinionLoading = true
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/busLeaderOpinion/query`, para)
        .then(response => {
          if (response.data.success) {
            this.leaderOpinion = response.data.result
            this.leaderOpinionLoading = false
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
            this.leaderOpinionLoading = false
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
          this.leaderOpinion1Loading = false
        })
    },
    leaderOpinionFormSubmit () {
      this.$refs['leaderOpinionForm'].validate((valid) => {
        if (valid) {
          let para = {
            leaderName: this.leaderOpinionForm.leaderName,
            postName: this.leaderOpinionForm.postName,
            commentTime: this.leaderOpinionForm.commentTime,
            comment: this.leaderOpinionForm.comment,
            leaderType: this.leaderType,
            recordId: this.recordId,
            recordTable: this.recordTable,
            id: this.leaderOpinionForm.id
          }
          this.leaderOpinionFormLoading = true
          this.$http
            .post(this.$http.defaults.selectionAPI + `api/busLeaderOpinion/save`, para)
            .then(response => {
              if (response.data.success) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.getLeaderOpinion()
                this.leaderOpinionFormLoading = false
                this.leaderOpinionVisible = false
              } else {
                this.$message({
                  message: '保存失败:' + response.data.message,
                  type: 'error'
                })
                this.leaderOpinionFormLoading = false
              }
            })
            .catch(error => {
              this.$message({
                message: '网络保存失败:' + error,
                type: 'error'
              })
              this.leaderOpinionFormLoading = false
            })
        }
      })
    },
    handleSelectLeader (item) {
      console.log('selectitem')
      console.log(item.postName)
      this.leaderOpinionForm.postName = item.postName
    },
    querySearchLeaderName (queryString, cb) {
      return this.getLeaderName(this, queryString, cb)
    },
    getLeaderName (self, queryString, cb) {
      let para = {
        key: queryString,
        leaderType: this.leaderType
      }
      self.$http
        .post(this.$http.defaults.selectionAPI + `api/busLeader/queryByKey`, para)
        .then(function (response) {
          console.log('获取成功')
          var results = response.data.result
          let newArr = []
          results.forEach(function (item) {
            let obj = {'value': item.leaderName, 'postName': item.postName}
            newArr.push(obj)
          })
          console.log(JSON.stringify(newArr))
          cb(newArr)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    addLeaderOpinion () {
      if (this.$refs['leaderOpinionForm']) {
        this.$refs['leaderOpinionForm'].resetFields()
      }
      this.leaderOpinionVisible = true
    }
  },
  mounted () {
  }
}
</script>

<style>
  #leaderOpinionForm .el-form-item {
    margin-bottom: 22px !important;
  }
  #leaderOpinion .el-table td{
    text-align: left !important;
  }

  #leaderOpinion .el-table{
    border: #95B8E7 solid 1px;
  }
  #leaderOpinion .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
    border-right: #95B8E7 solid 1px;
    border-bottom: #95B8E7 solid 1px;
    min-height: 30px;
    line-height:30px;
  }
  #leaderOpinion .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体';
    text-align: center;
  }
</style>
